<template>
  <div class="list">
    <div class="top">
      <van-row>
        <van-col class="top_tb" offset="19">
          <router-link :to="{ name: 'SetLogin' }"><van-icon name="setting-o" size="2em" /></router-link>
          &nbsp;
          <router-link :to="{ name: 'News' }"><van-icon name="chat-o" size="2em" /></router-link>
        </van-col>
      </van-row>

      <van-row type="flex" class="teshu">
        <van-col span="4">
          <router-link :to="{ name: 'PerSonal' }">
            <van-icon name="manager" size="3em" color="#e0e0e0" />
          </router-link>
        </van-col>
        <van-col span="5">
          <router-link :to="{ name: 'PerSonal' }">{{userName}}</router-link>
        </van-col>
        <p>新会员注册送140元优惠大礼包</p>
      </van-row>

      <van-row class="top-b" type="flex" justify="space-around" >
        <van-col span="6">
          优惠券<br/>
          <span>7</span>
        </van-col>
        <van-col span="6">优选卡</van-col>
        <van-col span="6">优选积分</van-col>
      </van-row>
    </div>

    <div class="content" >
      <router-link :to="{ name: 'Login' }">
        <van-row type="flex" justify="space-around" >
          <van-col span="6" >
            <van-icon name="bill" size="2em"/>
            <div class="teshu2">待付款</div>
          </van-col>
          <van-col span="6">
            <van-icon name="send-gift" size="2em"/>
            <div class="teshu2">待收货</div>
          </van-col>
          <van-col span="6">
            <van-icon name="comment" size="2em"/>
            <div class="teshu2">待评价</div>
          </van-col>
          <van-col span="6">
            <van-icon name="gold-coin" size="2em"/>
            <div class="teshu2">退换/售后</div>
          </van-col>
          <van-col span="6">
            <van-icon name="column" size="2em"/>
            <div class="teshu2">全部订单</div>
          </van-col>
        </van-row>
      </router-link>

      <router-link :to="{ name: 'Login' }">
        <div class="wdfw">
          <h5>我的服务</h5>
          <van-row type="flex" justify="space-around" >
            <van-col span="6" >
              <van-icon name="gift-o" size="2em"/>
              <div class="teshu2">我的礼物</div>
            </van-col>
            <van-col span="6">
              <van-icon name="goods-collect-o" size="2em"/>
              <div class="teshu2">分享优选</div>
            </van-col>
            <van-col span="6">
              <van-icon name="shop-o" size="2em"/>
              <div class="teshu2">我的门店</div>
            </van-col>
            <van-col span="6">
              <van-icon name="location-o" size="2em"/>
              <div class="teshu2">我的地址</div>
            </van-col>
          </van-row>

          <van-row type="flex" justify="space-around" >
            <van-col span="6" >
              <van-icon name="coupon-o" size="2em"/>
              <div class="teshu2">补开发票</div>
            </van-col>
            <van-col span="6">
              <van-icon name="star-o" size="2em"/>
              <div class="teshu2">我的收藏</div>
            </van-col>
            <van-col span="6">
              <van-icon name="warn-o" size="2em"/>
              <div class="teshu2">安全中心</div>
            </van-col>
            <van-col span="6">
              <van-icon name="notes-o" size="2em"/>
              <div class="teshu2">意见反馈</div>
            </van-col>
          </van-row>
          <div class="kfrx">
            <div>
              <h5>客服热线</h5>
              <p>08:00-22:00</p>
            </div>
            <span>
              9533585
              <i></i>
            </span>
          </div>
        </div>
      </router-link>
    </div>

    <div class="tuiJ">
      <h5>为您推荐</h5>
      <van-card
          v-for="product in products"
          :num="product.quantity"
          :price="product.price"
          :desc="product.descriptions"
          :title="product.name"
          :thumb="'https://api.cat-shop.penkuoer.com'+product.coverImg"
          :key="product._id"
          :thumb-link="`#/list/${product._id}`"
        >
        <div slot="footer">
          <van-button size="mini" @click="addToCartHandle(product._id)"><van-icon class="btn-cart" name="cart" /></van-button>
        </div>
        </van-card>
        <van-button class="LoadMore" type="primary" size="large" @click="loadMore">加载更多</van-button>
    </div>
  </div>
</template>
<script>

import { get } from 'axios';

export default {
  data(){
    return {
      products:[],
      page:1,
      pageCount:1,
      userName:''
    }
  },
  created(){
    this.loadData()
    this.userName=localStorage.getItem('userName')
    //console.log(localStorage.getItem('userName'))
  },
  methods:{
    addToCartHandle(id){
      alert(id)
    },
    loadMore(){
      this.page +=1
      this.loadData()
    },
    loadData(){
      get(`https://api.cat-shop.penkuoer.com/api/v1/products?page=${this.page}`)
      .then(res => {
        this.products = this.products.concat(res.data.products)
        this.pageCount = res.data.pages
      })
      // .catch(err=>{
      //   console.log(err)
      // })
    }
  }
}
</script>

<style scoped>
    *{
      margin: 0;
      padding: 0;
    }
    .LoadMore{
      height:3rem;
      margin-bottom: 3rem;
    }
    .top{
        background:#42cf8d;
        height:100%;
        font-size: 0.8rem;
        text-align: center;
        color: white;
    }
    .top .top_tb{
      margin-top: 1rem;
       float:right;
       margin-right:1rem;
    }
    .top_tb .van-icon{
      color: #fff;
    }
    .touxiang{
       font-size: 5rem;
    }
    .teshu{
      height:4rem;
    }
    .teshu a{
       color: aliceblue
    }
     .teshu p{
      background-color: red;
      width: 10rem;
      height:1.2rem;
      line-height: 1.2rem;
      margin: 0;
      font-size: 0.5rem;
      margin-top: 1.5rem;
      margin-left: -3.8rem;
    }
    .top .top-b{
      height:2rem;
      margin-bottom: 0.5rem;
    }
    .van-col--5{
      height: 1rem;
    }
    .van-col--4{
      width: 3rem;
      height:3rem;
      background-color:#fff;
      border-radius:50rem;
      margin-left: 1rem;
    }
    .content{
      height: 25rem;
      background-color:#f4f4f4;
      padding: 1rem;
    }
    .content .van-row{
      height: 5rem;
      background-color: #fff;
      color: #fff
    }
    .content .van-col{
      width: 3rem;
      height:3rem;
      background-color:#ffcc4e;
      border-radius:50rem;
      margin-left: 1rem;
      margin-top: 0.5rem;
      text-align: center
    }
    .content .van-icon{
      line-height: 3rem;
      text-align: center;
    }
    .content .teshu2{
      width: 3rem; 
      font-size: 0.66rem;
      margin-top: 0.5rem;
      color: black
    }
    .wdfw{
      margin-top: 1rem;
      background-color: #fff;
      color: black;
      padding:0.5rem 0;

    }
    .wdfw .van-col{
      width: 3rem;
      height:3rem;
      background-color:#fff;
      color: black;
      border-radius:50rem;
      margin-left: 1rem;
      margin-top: 0.5rem;
      text-align: center
    }
    .wdfw h5{
      height: 2rem;
      margin: 0 0 0 1rem;
      line-height: 2rem;
    }
    .kfrx{
      height: 3rem;
      width: 18rem;
      border: 2px solid #efe4d0;
      margin: 1rem auto;
      border-radius:2rem;
      display: flex;
    }
    .kfrx div{
      width: 11rem;
      height: 3rem;
      margin-left: 1rem;
    }
    .kfrx p{
      font-size: 0.35rem;
      margin-left: 1rem;
      color: #8b8b8b
    }
    .kfrx span{
      line-height: 2.5rem;
      color: #c5bea4;
    }
    .tuiJ{
      background-color: #f4f4f4;
      height:5rem;
    }
    .tuiJ h5{
      text-align: center
    }

</style>

